import React from 'react'

export default class Test extends React.Component {
    constructor() {
        super()
        this.state = {
            count: 0,
            msg: 'hello component'
        }
    }
    render() {
        // render函数中的this,一定是当前组件实例
        // 由于这样子写过于混乱，所以把函数写在外边

        return (
            <div>
                <h1 id='c'>{this.state.count}</h1>
                <button onClick={() => {
                    // 🐷 setState的作用：1.修改私有数据 2.让组件更新(页面更新)
                    // setState的执行是异步的

                    this.setState({
                        count: this.state.count + 1
                    })
                    // 🐷 setState中可以传两个数据，第一个是修改数据之后，渲染之前调用该函数
                    //                         第二个是修改数据之后，渲染数据之后调用该函数
                    // 当第一次点击按钮时，打印的结果为
                    this.setState(
                        (state) => {
                            console.log('第一个函数执行了', state.count) //第一个函数执行了 1
                            console.log('第一个函数的真实dom:', document.getElementById('c').innerText) //第一个函数的真实dom: 0
                        },
                        () => {
                            console.log('第二个函数执行了', this.state.count) //第二个函数执行了 1
                            console.log('第二个函数的真实dom:', document.getElementById('c').innerText) //第二个函数的真实dom: 1
                        }
                    )
                }}>
                    +
                </button>
            </div>
        )
    }
}